<template>
    <view class="login_tip" :class="{ tip_hidden: isHidden }">
        <view class="login_tip_info">
            <view class="tip">您还未登录,请先登录</view>
            <view class="login_btn" @tap.stop="toLoginPage()">立即登录</view>
            <view class="icon iconfont" @tap.stop="closeTip">&#xe753;</view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    import Taro from '@tarojs/taro';

    const isHidden = ref(true);

    const toLoginPage = ref(() => {
    });

    const closeTip = () => {
        isHidden.value = true;
    };
    defineExpose({
        isHidden,
        toLoginPage
    });
</script>

<style lang="scss">
    .login_tip.tip_hidden {
        opacity: 0;
        height: 0;
    }

    .login_tip::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 3;
        background-color: rgba(125, 125, 125, 0.4);
        filter: blur(20rpx);

    }

    .login_tip {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 4;
        width: 100%;
        height: 100%;
        top: 0;
        opacity: 1;
        transition: all 0.5s;

        .login_tip_info {

            position: fixed;
            display: flex;
            z-index: 5;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 500rpx;
            height: 300rpx;
            font-weight: 700;
            text-align: center;
            font-size: 40rpx;
            border-radius: 40rpx;
            margin: 0 auto;
            background-color: #e2e4e4;
            border: 1rpx solid rgba(155, 155, 155, 0.5);
            box-shadow: 3rpx 2rpx 40rpx rgba(26, 27, 41, 1);

            .tip {
                line-height: 120rpx;
                color: #f96650;
                width: 100%;
                height: 120rpx;

            }

            .login_btn {
                height: 100rpx;
                line-height: 100rpx;
                width: 100%;
                background-color: #20c138;
                color: #fff;
                border-radius: 15rpx;

            }

            .icon {
                position: absolute;
                font-size: 60rpx;
                width: 60rpx;
                height: 60rpx;
                line-height: 50rpx;
                top: 0rpx;
                right: 0rpx;
                text-align: center
            }
        }
    }
</style>